/*
 * @Author: cx806806 1289021970@qq.com
 * @Date: 2023-03-30 16:58:57
 * @LastEditors: cx806806 1289021970@qq.com
 * @LastEditTime: 2023-03-30 17:30:33
 * @FilePath: \XHJD\src\plugins\tips.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export default {
  showtips: {
    // el {element} 当前元素
    inserted(el, binding) {
      const content = binding.value
      const curStyle = window.getComputedStyle(el, '') // 获取当前元素的style
      const textSpan = document.createElement('span') // 创建一个容器来记录文字的width
      // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
      textSpan.style.fontSize = curStyle.fontSize
      textSpan.style.fontWeight = curStyle.fontWeight
      textSpan.style.fontFamily = curStyle.fontFamily
      // 将容器插入body，如果不插入，offsetWidth为0
      document.body.appendChild(textSpan)
      // 设置新容器的文字
      textSpan.innerHTML = content
      // 如果字体元素大于当前元素，则需要隐藏
      if (textSpan.offsetWidth > el.offsetWidth) {
        // 给当前元素设置超出隐藏
        el.style.overflow = 'hidden'
        el.style.textOverflow = 'ellipsis'
        el.style.whiteSpace = 'nowrap'
        // 鼠标移入
        el.onmouseenter = function (e) {
          // 创建浮层元素并设置样式
          const vcTooltipDom = document.createElement('div')
          vcTooltipDom.style.cssText = `
                    max-width:400px;
                    max-height:90px;
                    overflow: auto;
                    position:absolute;
                    top:${e.clientY - 10}px;
                    left:${e.clientX}px;
                    transform: translateX(-100%);
                    background: rgba(0, 0 , 0, .6);
                    color:#fff;
                    border-radius:5px;
                    padding:4px;
                    display:inline-block;
                    font-size:16px;
                    z-index:19999
                  `
          // 设置id方便寻找
          vcTooltipDom.setAttribute('id', 'vc-tooltip')
          // 将浮层插入到body中
          document.body.appendChild(vcTooltipDom)
          // 浮层中的文字
          document.getElementById('vc-tooltip').innerHTML = content
        }
        // 鼠标移出
        el.onmouseleave = function () {
          // 找到浮层元素并移出
          const vcTooltipDom = document.getElementById('vc-tooltip')
          vcTooltipDom && document.body.removeChild(vcTooltipDom)
        }
      }
      // 记得移除刚刚创建的记录文字的容器
      document.body.removeChild(textSpan)
    },
    // 指令与元素解绑时
    unbind() {
      // 找到浮层元素并移除
      const vcTooltipDom = document.getElementById('vc-tooltip')
      vcTooltipDom && document.body.removeChild(vcTooltipDom)
    }
  }
}
